<template>
  <view>
    <Ugosearch></Ugosearch>
    <u-tabs
      active-color="#eb4450"
      :list="list"
      activecolor="#eb4450"
      :bar-width="180"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <view class="tab-content">
      <view class="tabs-item" v-for="item in goodList" :key="item.cat_id">
        <block>
          <navigator
            class="goods-item u-p-10"
            :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
          >
            <u-row>
              <u-col span="4">
                <view class="u-flex u-row-center">
                  <u-image
                    width="191rpx"
                    height="191rpx"
                    :src="item.goods_big_logo"
                  ></u-image>
                </view>
              </u-col>
              <u-col span="8">
                <view style="height: 191rpx" class="u-flex-col u-row-around">
                  <view class="goods-name">{{ item.goods_name }}</view>
                  <view class="goods-price">¥{{ item.goods_price }}</view>
                </view>
              </u-col>
            </u-row>
            <u-line class="u-p-10" color="#eee" />
          </navigator>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goodList: [],
      total: 0,
    };
  },
  onLoad({ cid }) {
    this.parmas = { query: "", cid: cid || 6, pagenum: 1, pagesize: 10 };
    this.getGoodList();
  },
  onReachBottom() {
    if (this.goodList.length >= this.total) {
      uni.showToast({
        title: "没有更多商品了",
        icon: "none",
      });
    } else {
      this.parmas.pagenum++;
      this.getGoodList();
    }
  },
  async onPullDownRefresh() {
    this.goodList = [];
    this.parmas.pagenum = 1;
    await this.getGoodList();
    uni.stopPullDownRefresh();
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoodList() {
      const res = await this.$u.get("/goods/search", this.parmas);
      this.goodList = [...this.goodList, ...res.goods];
      this.total = res.total;
      console.log(this.goodList);
    },
  },
};
</script>

<style lang="scss">
.goods-name {
  color: #666;
}
.goods-price {
  color: #eb4450;
}
</style>